<template functional>
  <div class="functional-box">
    <p>
      函数式组件
      <a
        href="https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6"
        target="_blank"
        rel="noopener noreferrer"
        >函数式组件</a
      >
    </p>
    <el-tag v-for="item in props.data" :key="item.id">
      {{ item.title }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: 'functional-demo2',
  props: {
    data: {
      required: true,
      type: Array
    }
  }
}
</script>

<style lang="less" scoped>
.functional-box {
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
